<template>
	<el-upload v-model:file-list="fileList" :list-type="listType" class="avatar-uploader" :action="fileUploadUrl"
		:on-success="handleAvatarSuccess" :on-remove="handleRemove" :before-upload="beforeAvatarUpload"
		  :accept="accept" :limit="limit" :on-exceed="handleExceed" :auto-upload="false" :on-change="handleChange">
		<el-icon>
			<Plus />
		</el-icon>
	</el-upload>
</template>
<script lang="ts" setup>
	import {
		ref,
		reactive,
		watch
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		useStore
	} from "vuex";
	import {
		ElMessage
	} from "element-plus";

	const router = useRouter();
	const route = useRoute();
	const store = useStore();
	
	const fileList = reactive([]);
	const listType = ref("picture-card");
	const fileUploadUrl = ''; //上传得接口路径；可根据需求
	//属性
	const props = defineProps({
		imgUrl: "",
		limit:'',
		accept:'',
		mulTip: { type: Boolean, default: false }
	});
	setTimeout(() => {
		//文件回显,这里异步处理了，因为回显需要等待接口数据返回
		if (props.imgUrl) {
			let tmpArray=props.imgUrl.split(",");
			tmpArray.forEach((item: any) => {
				fileList.push({
					name: item,
					url: item
				})
			});
		}
	}, 500);
	//解析组件传过来的方法
	const emits = defineEmits(["getUrl","changeUrl"]);

    // 变化时回调
    const handleChange=(res: any,file: any) => {
        //临时路径
		let urls: any[] = [];
		//处理文件list
		file.forEach((item: { response: any; url: any; }) => {
			// 上传文件是带有response属性的，回显的文件没有。处理是为了回显再编辑文件的时候
			if(item){
				let rs=item.response;
				if(rs){
					let code=rs.code;
					if(code==200){
						let fileUrl=rs.data.fileUrl;
						urls.push(fileUrl);
					}
				}else{
					urls.push(item.url);
				}
			}
		});
		//返回父组件 给到指定字段赋值，多文件以逗号分隔
		emits("getUrl", urls.toString());
        emits('changeUrl','')
    }
	
	//上传成功回调
	const handleAvatarSuccess=(res: any,file: any, uploadFiles: any[]) => {
		//临时路径
		let urls: any[] = [];
		//处理文件list
		uploadFiles.forEach(item => {
			// 上传文件是带有response属性的，回显的文件没有。处理是为了回显再编辑文件的时候
			if(item){
				let rs=item.response;
				if(rs){
					let code=rs.code;
					if(code==200){
						let fileUrl=rs.data.fileUrl;
						urls.push(fileUrl);
					}
				}else{
					urls.push(item.url);
				}
			}
		});
		//返回父组件 给到指定字段赋值，多文件以逗号分隔
		emits("getUrl", urls.toString());
        emits('changeUrl','')
	};
	//删除
	const handleRemove = (uploadFile: any, uploadFiles: any[]) => {
		//临时路径
		let urls: any[] = [];
		//处理文件list
		uploadFiles.forEach(item => {
			// console.log(el.response.fileUrl);
			if(item){
				let rs=item.response;
				if(rs){
					let code=rs.code;
					if(code==200){
						let fileUrl=rs.data.fileUrl;
						urls.push(fileUrl);
					}
				}else{
					urls.push(item.url);
				}
			}
		});
		//返回父组件 给到指定字段赋值，多文件以逗号分隔
		emits("getUrl", urls.toString());
        emits('changeUrl','')
	}
	//文件限制
	const handleExceed=(files: string|any[], fileList: string|any[])=> {
		ElMessage.warning(`当前限制选择 ${props.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
	}
	//上传前的校验
	const beforeAvatarUpload = (rawFile: { type: string; size: number; }) => {
		if (
			rawFile.type !== "image/jpeg" &&
			rawFile.type !== "image/png"&&
			rawFile.type !== "image/jpg"
		) {
			ElMessage.error("只能上传jpeg或png或jpg");
			return false;
		} else if (rawFile.size / 1024 / 1024 > 2) {
			ElMessage.error("文件大小不能超过2MB!");
			return false;
		}
		return true;
	};
	//const handleChangePic = () => {
		//if (props.mulTip) {
		//	if (fileList.value.length > 1) {
		//		fileList.value.splice(0, 1);
		//	}
		//}
	//}

</script>
<style lang="scss" scoped>
	.avatar {
		width: 100px;
		height: 80px;
	}
</style>

